<template>
	<view >
		<u-swiper @click="swiperClick" :list="swiperList" name="imgUrl" height="320" :effect3d="true"></u-swiper>
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<u-icon 
				size="50rpx" 
				:label="item.label" 
				:name="item.icon"
				label-color="#8c8d8c"
				margin-top="10rpx"
				label-pos="bottom"
				color="#dd6161"
				:is-scroll="false" 
				></u-icon><br>
				<!-- <text>{{item.title}}</text> -->
			</view>
		</view>
		<view class="u-text-center u-m-t-10">
			<u-tabs 
			:list="sortList" 
			bar-width="100" 
			item-width="160" 
			active-color="#fa3534"  
			:is-scroll="true" 
			:current="currentSort" 
			@change="changeSort"
			>
			</u-tabs>
		</view>
		<u-row gutter="16" class="u-skeleton">
			<u-col span="6" v-for="book in booksList">
				<books-card :book="book"></books-card>
			</u-col>

		</u-row>
		<u-loadmore :status="status" :load-text="loadText"/>
		<!--引用 骨架屏组件-->
		<u-skeleton :loading="gujialoading" :animation="true" bgColor="#FFF"></u-skeleton>
		<u-back-top class="u-back-top" :scroll-top="scrollTop" top="600" icon="arrow-up" tips="返回" ></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navs:[
					{
						icon: 'grid-fill',
						label: '图书分类',
						path: '/pages/goods/goods'
					},{
						icon: 'attach',
						label: '课件资源',
						path: '/pages/pptres/pptres'
					},{
						icon: 'volume-fill',
						label: '在线音频',
						path: '/pages/audio/audio'
					},{
						icon: 'question-circle-fill',
						label: '联系我们',
						path: '/pages/contact/contact'
					}
				],
				swiperList:[],
				sortList:[
					{name:'推荐'},
					{name:'小学'},
					{name:'初中'},
					{name:'高中'},
				],
				currentSort:0,
				booksList:[{},{}],
				page:1,
				gujialoading:false, //骨架屏加载
				totalPage:0,
				status: 'loading',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				scrollTop: 0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getSwiperList()
			this.getData()
			
		},
		methods: {
			//获取轮播图list
			async getSwiperList(){
				const res = await this.$u.api.getSwiperList();
				console.log(res)
				this.swiperList = res
			},
			
			//轮播图点击
			swiperClick(index){
				// console.log(this.swiperList[index].url)
				if(this.swiperList[index].bid!=0){
					this.$u.route({
						url:'/pages/goods/show',
						params:{
							id:this.swiperList[index].bid
						}
					})
				}else if(this.swiperList[index].aid!=0){
					this.$u.route({
						url:'/pages/articles/articleShow',
						params:{
							id:this.swiperList[index].aid
						}
					})
				}else{
					return
				}
				
			},
			//导航点击处理函数
			navItemClick(url){
				if(url === "/pages/goods/goods"){
					this.$u.route({
						type: "switchTab",
						url: url
					})
				}else{
					this.$u.route({
						url: url
					})
				}
				
				
			},
			changeSort(index){
				this.currentSort = index
				//索引切换 按不同条件加载
				this.page = 1
				this.booksList = [{},{}]
				this.getData()
			},
			async getData(){
				
				//设置骨架屏显示
				this.gujialoading = true
				const params = {
					pageNum: this.page
				}
				//判断用户选择的条件
				if(this.currentSort == 1) params.cateId = 10000
				if(this.currentSort == 2) params.cateId = 10003
				if(this.currentSort == 3) params.cateId = 10004
				
				
				const res = await this.$u.api.getIndexGoods(params)
				this.totalPage = res.totalPage
				if(res.total == 0){
					this.status='nomore'
				}else{
					this.status='loading'
				}
				console.log(res)
				// if(this.$u.test.isEmpty(this.booksList[this.booksList.length-1].name)){
				// 	this.booksList = []
				// }
				// this.booksList.push(...res.list)
				this.booksList = this.$u.test.isEmpty(this.booksList[this.booksList.length-1].name) ? res.list : [...this.booksList,...res.list]
				this.gujialoading = false//隐藏骨架屏
				// this.swiperList = res.slides // 获取轮播图
				
				
				
				
			}
		},
		onReachBottom(){
			if(this.page+1 <= this.totalPage){
				this.page = this.page + 1
				this.status = "loading"
				setTimeout(()=>{
					this.getData()
				},1000)
				
			}else{
				this.status = "nomore"
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.u-back-top {
		height: 7vh;
	}
	.nav{
		display: flex;
		margin: 15rpx 20rpx;
		background-color: #FFFFFF;
		.nav_item{
			width: 25%;
			text-align: center;
			margin: 30rpx 20rpx;
			.icon-tupian{
				font-size: 45rpx;
			}
			text{
				font-size: 10rpx;
			}
		}
	}
</style>
